<template>
  <div class="list">
    <PageHeader>
      <div style="padding-bottom: 16px;">
        <div class="sort-keys">
        <div class="tab-list" style="margin-bottom: 10px;">
           <div class="item" @click="changeStatus(-1)" :class="{actived: login_status === -1}">
             错误登录日志
           </div>
           <div class="item" @click="changeStatus(1)" :class="{actived: login_status === 1}">
             正常日志
           </div>
         </div>
        </div>
      </div>
      

    </PageHeader>

    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">
        <a-input placeholder="输入手机号码" style="width: 180px;margin-right:10px;" v-model="search_phone" allowClear :size="size"
          @input="onSearch" />
      </div>
    </div>
    <a-table class="table" :rowKey="row => row.uuid" :dataSource="list" :pagination="pagination" :size="size">

      <a-table-column title="手机号码" width="120px">
        <template slot-scope="row">
          <div>{{row.phone}}</div>
        </template>
      </a-table-column>
      <a-table-column title="用户" width="120px">
        <template slot-scope="row">
          <div>{{row.name}}</div>
        </template>
      </a-table-column>
      <a-table-column title="登录ip" width="140px" >
        <template slot-scope="row">
          <div>{{row.ip}}</div>
        </template>
      </a-table-column>
      
      <a-table-column title="ip归属地" width="140px" >
        <template slot-scope="row">
          <div>{{row.ip_str}}</div>
        </template>
      </a-table-column>
      
      <a-table-column title="登录错误备注" width="140px" v-if="login_status == -1">
        <template slot-scope="row">
          <div>{{row.msg}}</div>
        </template>
      </a-table-column>
      
      <a-table-column
        title="登录时间"
        width="110px"
      >
      <template slot-scope="row">
          <span>{{ row.created_at }}</span>
        </template>
      </a-table-column>
    
    </a-table>

  </div>
</template>
<script>
  import moment from 'moment'
  import ISwitch from '@/components/ISwitch/ISwitch'

  const resourceType = 'admin/loginLog'
  const resourceTypeText = '后台登录日志'

  export default {
    components: {
      ISwitch,
    },
    props: {
      selectMode: {
        type: Boolean
      },
      params: {
        type: Object
      },
      size: {
        type: String,
        default: 'default'
      }
    },
    data() {
      return {
        isEdit: false,
        resourceTypeText,
        list: [],
        login_status: -1,
        page: 1,
        per_page: 10,
        total: 0,
        search_phone: '',
        keyType: 'phone'
      }
    },
    watch: {
    },
    computed: {
      pagination() {
        return {
          defaultPageSize: this.per_page,
          current: this.page,
          total: this.total,
          onChange: (e) => {
            this.page = e
            this.fetchData()
          }
        }
      }
    },
    filters: {
      parseStyle (value) {
        if(new Date(value).getTime() >= (new Date().getTime() - 86400*2000) ){
            return `color:red;`
        }
      },
      formatDate (value) {
        return value ? moment(value).fromNow() : ''
        
      }
    },
    created() {
      this.fetchData()
      this.fetchCountData()
      // this.getCategoryList()
    },
    methods: {
      refreshData() {
        this.page = 1
        // this.key = ''
        this.fetchData()
      },
      onSearch(e) {
        this.page = 1
        this.fetchData()
      },
      changeStatus(status) {
        this.login_status = status
        this.fetchData();
      },
      fetchData() {
        this.isEdit = false
        this.$http.get(`/${resourceType}`, {
          params: {
            ...this.params,
            page: this.page,
            per_page: this.per_page,
            search_phone: this.search_phone,
            login_status: this.login_status
          }
        }).then(res => {
          this.list = res.data.list
          this.total = res.data.item_total
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .top-btn {
    background: #1890FF;
    color: white;
    cursor: pointer;
    font-size: 80%;
    border-radius: 4px;
    padding: 2px 6px;

    &.unset {
      border: 1px solid #D8D5D5;
      background: #D8D5D5;
      color: gray;
    }
  }

  .content-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .sort-keys {
    display: flex;
    align-items: center;
  
    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;  
      .item {
        margin-right: 20px;
        //margin-left: 10px;
        padding: 0px 4px 4px 4px;
        cursor: pointer;
        font-weight: 500;
        //font-size: 16px;
  
        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
          font-weight: bold;
        }
  
        &:hover {
          color: #1890FF;
        }
      }
    }
  
  }

  .table {
    .thumb {
      height: 60px;
      border-radius: 6px;
    }

    .content-image {
      height: 60px;
      width: 60px;
      margin-right: 10px;
      margin-bottom: 10px;
      object-fit: cover;
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }

    .user {
      display: flex;
      // flex-wrap: wrap;
      align-items: center;

      img {
        width: 26px;
        height: 26px;
        margin-right: 6px;
        border-radius: 50%;
        overflow: hidden;
      }

      .gender-man,
      .gender-woman {
        margin-left: 5px;
        font-size: 12px;
      }

      .gender-man {
        color: #409EFF;
      }

      .gender-woman {
        color: #F56C6C;
      }
    }
  }
</style>
